<template>
	<div class="wy-main message-receive">
		<a-row class="wy-main-title">
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical" type="vertical" />
					<span class="title-span">消息接收管理</span>
						<a-button class="title-button">消息接收人管理</a-button>
						<a-button class="title-button">恢复默认</a-button>
					<a-divider class="title-divider" />
				</p>
			</a-col>
		</a-row>
		<a-row class="tips">
			<div>提醒：以下联系人都可设置为消息接收人，物流云不会将这些信息对外披露或向第三方提供。</div>
		</a-row>
		<a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection" style="margin-top: 10px;">
			<span slot="operation" slot-scope="text, record">
				账户联系人，{{text.name}}
		      <a href="javascript:;">修改</a>
	    	</span>
		</a-table>
	</div>
</template>
<script>
	const columns = [{
		title: '消息类型',
		dataIndex: 'name',
		key: 'name',
	}, {
		title: '站内信',
		dataIndex: 'mail',
		key: 'mail',
	}, {
		title: '邮箱',
		dataIndex: 'phone',
		key: 'phone',
	}, {
		title: '短信',
		key: 'position',
		dataIndex: 'position',
	}, {
		title: '消息接受人',	
		key: 'operation',
		scopedSlots: {
			customRender: 'operation'
		},
	}];

	const data = [{
		key: '1',
		name: 'John Brown',
		mail: 'qweer@26.com',
		phone: '157*******4',
		position: '运营管理员',
	}, {
		key: '2',
		name: 'John Brown',
		mail: 'qweer@26.com',
		phone: '157*******4',
		position: '运营管理员',
	}, {
		key: '3',
		name: 'John Brown',
		mail: 'qweer@26.com',
		phone: '157*******4',
		position: '运营管理员',
	}];
	const rowSelection = {
	  onChange: (selectedRowKeys, selectedRows) => {
	    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
	  },
	  onSelect: (record, selected, selectedRows) => {
	    console.log(record, selected, selectedRows);
	  },
	  onSelectAll: (selected, selectedRows, changeRows) => {
	    console.log(selected, selectedRows, changeRows);
	  },
	};
	export default {
		data() {
			return {
				data,
				columns,
				rowSelection
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		methods: {
			// 认证提交
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						console.log('Received values of form: ', values);
					}
				});
			},
			// 检测确认密码
			handleConfirmBlur(e) {
				const value = e.target.value;
				this.confirmDirty = this.confirmDirty || !!value;
			},
			// 检测确认密码
			compareToFirstPassword(rule, value, callback) {
				const form = this.form;
				if(value && value !== form.getFieldValue('password')) {
					callback('您输入的两个密码不一致!');
				} else {
					callback();
				}
			},
			// 检测密码		
			validateToNextPassword(rule, value, callback) {
				const form = this.form;
				if(value && this.confirmDirty) {
					form.validateFields(['confirm'], {
						force: true
					});
				}
				callback();
			},
		}
	}
</script>

<style lang="less" scoped>
	.message-receive {
		.tips {
			border: 1px solid #E8E8E8;
			padding: 10px;
			margin-top: 10px;
		}
	}
</style>